<template>
  <el-row>
    <el-col :span="12">
      <el-tree
        :data="tree1"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent1"
      ></el-tree>
    </el-col>
    <el-col :span="12">
      <el-tree
        :data="tree2"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent2"
      ></el-tree>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: ["GL"],
  data() {
    return {
      options: [],
      value1: "",
      value2: "",
      tree1: [],
      tree2: [],
      GLid: "",
      tableData: [{ col1: "1", col2: "5" }],
      glList: []
    };
  },
  methods: {
    getGL(temID) {
      let arr = [];
      for (let index = 0; index < this.glList.length; index++) {
        const element = this.glList[index];
        if (element.tem1ID == temID) arr.push(element);
      }
      return arr;
    },
    //关联表一拖拽完毕drop执行
    drop(event, data) {
      var tem2 = event.dataTransfer.getData("item");
      //添加到关联表
      let GL = {
        id: this.$GUID(),
        GLid: this.GL.id,
        tem1ID: data.id,
        tem1Name: data.name,
        tem2ID: JSON.parse(tem2).id,
        tem2Name: JSON.parse(tem2).name
      };
      this.$setGLList(GL);
      if (data.gl === undefined) {
        this.$set(data, "gl", []);
      }
      data.gl.push(GL);
    },
    //关联模板1
    renderContent1(h, { node, data, store }) {
      // console.log(node);
      let type = this.getLabel(data.type);
      if(data.gl==undefined){
        this.$set(data,"gl",this.getGL(data.id))
      }
      return (
        <span
          class="custom-tree-node"
          draggable="true"
          on-dragstart={event => {
            console.log("开始拖拽");
            console.log(event);
            //添加到关联表
            event.dataTransfer.setData("item", JSON.stringify(data));
          }}
        >
          <span>
            {data.name} | {type}
          </span>
          <div
            style="border:1px solid red;height:20px;width:300px"
            on-drop={event => this.drop(event, data)}
            on-dragover={event => {
              event.preventDefault();
            }}
          >
            {data.gl
              ? data.gl.map((item, index) => {
                  return (
                    <el-tag
                      size="mini"
                      closable
                      on-close={() => {
                        this.$delGLList(data.gl[index].id)
                        data.gl.splice(index, 1);
                      }}
                    >
                      {item.tem2Name}
                    </el-tag>
                  );
                })
              : ""}
          </div>
        </span>
      );
    },
    renderContent2(h, { node, data, store }) {
      let type = this.getLabel(data.type);
      return (
        <span
          class="custom-tree-node"
          draggable="true"
          on-dragstart={event => {
            event.dataTransfer.setData("item", JSON.stringify(data));
          }}
        >
          <span>
            {data.name} | {type}
          </span>
        </span>
      );
    }
  },
  mounted() {
    let arr1 = this.$getMBList(this.GL.tem1);
    let arr2 = this.$getMBList(this.GL.tem2);
    this.tree1 = this.$treeFn(arr1, "0");
    this.tree2 = this.$treeFn(arr2, "0");
    console.log(this.GL)
    this.glList = this.$getGLList(this.GL.id);
    console.log(this.glList)
  }
};
</script>
